<template>
    <el-row class="tac">
      <el-col :span="24">
        <h5 class="mb-2"></h5>
        <el-menu
          :default-active="activeIndex"
          @select="handleMenuSelect"
        >
          <el-menu-item index="/">
            <el-icon><icon-menu /></el-icon>
            <span>料架管理</span>
          </el-menu-item>
          <el-menu-item index="/stock">
            <el-icon><document /></el-icon>
            <span>库存管理</span>
          </el-menu-item>
          <el-menu-item index="/setting">
            <el-icon><document /></el-icon>
            <span>系统设置</span>
          </el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
  </template>

<script lang="ts" setup>
import {Document, Menu as IconMenu } from '@element-plus/icons-vue'

import { ref, computed } from 'vue';
import { useRouter,useRoute } from 'vue-router';

const router = useRouter();

const route = useRoute()

const activeIndex = computed(()=>{
    return route.path
});

// const activeIndex = ref("/")

const handleMenuSelect = (index) => {
  // 切换路由
  router.push(index);
};

</script>

<style>
</style>
  